<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B站视频时间统计工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f4f4f4;
            padding: 20px;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(135deg, #00A1D6 0%, #0080A8 100%);
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .description {
            font-size: 16px;
            opacity: 0.9;
        }
        
        .instructions {
            padding: 20px;
            background: #f9f9f9;
            border-bottom: 1px solid #eee;
        }
        
        .instructions h2 {
            color: #00A1D6;
            margin-bottom: 15px;
        }
        
        .step {
            margin-bottom: 15px;
            display: flex;
        }
        
        .step-number {
            background: #00A1D6;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
        }
        
        .bookmarklet-demo {
            background: #fff8e1;
            padding: 15px;
            border-radius: 5px;
            margin: 20px 0;
            overflow-x: auto;
        }
        
        .code {
            font-family: monospace;
            background: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
            overflow-x: auto;
        }
        
        .drag-link {
            display: inline-block;
            background: #00A1D6;
            color: white;
            padding: 10px 15px;
            border-radius: 4px;
            text-decoration: none;
            margin: 10px 0;
            cursor: move;
        }
        
        .main-content {
            padding: 30px;
        }
        
        .video-list {
            margin-bottom: 30px;
        }
        
        .video-list h2 {
            color: #00A1D6;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #00A1D6;
        }
        
        .video-items {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px;
        }
        
        .video-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
        }
        
        .video-item:last-child {
            border-bottom: none;
        }
        
        .video-item:hover {
            background-color: #f9f9f9;
        }
        
        .calculator {
            background-color: #F4F4F4;
            border: 1px solid #00A1D6;
            border-radius: 5px;
            padding: 20px;
            color: #00A1D6;
        }
        
        .calculator h2 {
            color: #00A1D6;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #00A1D6;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        input[type="number"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #00A1D6;
            border-radius: 4px;
            font-size: 16px;
        }
        
        .range-inputs {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        button {
            background-color: #00A1D6;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s;
            width: 100%;
        }
        
        button:hover {
            background-color: #0080A8;
        }
        
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #e8f4fc;
            border-radius: 5px;
            text-align: center;
            font-size: 18px;
            color: #00A1D6;
            font-weight: bold;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        footer {
            text-align: center;
            padding: 20px;
            background-color: #f8f8f8;
            color: #666;
            font-size: 14px;
        }
        
        @media (max-width: 768px) {
            .main-content {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>B站视频时间统计工具</h1>
            <p class="description">轻松计算视频集数总时长，支持倍速播放时间计算</p>
        </header>
        
        <div class="instructions">
            <h2>使用说明</h2>
            
            <div class="step">
                <div class="step-number">1</div>
                <div>
                    <p><strong>创建书签工具</strong></p>
                    <p>将以下链接拖拽到您的浏览器书签栏中：</p>
                    <a href="javascript:(function(){try{function qsa(s,root){return Array.prototype.slice.call((root||document).querySelectorAll(s))}function pick(container){var sels=['.stat-item.duration','.duration'];for(var i=0;i<sels.length;i++){var n=qsa(sels[i],container).map(function(el){return (el.textContent||el.innerText||'').trim()}).filter(Boolean);if(n.length){return n}}return[]}function findActiveIndex(container){var items=qsa('.video-pod__item',container);for(var i=0;i<items.length;i++){if(items[i].classList.contains('active')){return i+1;}}return 1;}function parse(t){if(!t)return 0;t=(t+'').trim();var p=t.split(':').filter(function(x){return x!==''});var h=0,m=0,s=0;if(p.length===3){h=parseInt(p[0],10)||0;m=parseInt(p[1],10)||0;s=parseInt(p[2],10)||0}else if(p.length===2){m=parseInt(p[0],10)||0;s=parseInt(p[1],10)||0}else if(p.length===1){s=parseInt(p[0],10)||0}else{return 0}return h*3600+m*60+s}function fmt(sec){sec=Math.max(0,Math.floor(sec));var h=Math.floor(sec/3600);var rem1=sec-3600*h;var m=Math.floor(rem1/60);var s=sec-60*Math.floor(sec/60);return h+'时'+m+'分'+s+'秒'}var container=document.querySelector('.video-pod.video-pod');if(!container){alert('未找到视频列表容器（需要 .video-pod.video-pod）');return}var texts=pick(container);if(!texts.length){alert('未找到时长节点（需要 .stat-item.duration 或 .duration）');return}var secs=texts.map(parse);var totalCount=secs.length;var activeIndex=findActiveIndex(container);var body=document.body;var ex=document.getElementById('bili-time-range');if(ex){ex.remove()}var box=document.createElement('div');box.id='bili-time-range';box.style.cssText='padding:20px;width:320px;background-color:#F4F4F4;position:fixed;right:20px;top:120px;border:1px solid #00A1D6;border-radius:5px;color:#00A1D6;z-index:2147483647;font-size:14px;box-shadow:0 0 20px rgba(0,0,0,0.1)';var closeBtn=document.createElement('button');closeBtn.innerHTML='×';closeBtn.style.cssText='position:absolute;top:5px;right:5px;width:20px;height:20px;background:none;border:none;font-size:18px;color:#00A1D6;cursor:pointer;font-weight:bold;';closeBtn.onclick=function(){box.remove();};var title=document.createElement('div');title.textContent='B站区间时长统计（共 '+totalCount+' 集）';title.style.cssText='font-weight:bold;margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid #00A1D6;padding-right:20px;';var row1=document.createElement('div');row1.style.cssText='margin-bottom:15px;';var lab1=document.createElement('label');lab1.textContent='起始集数';lab1.style.cssText='display:block;margin-bottom:5px;font-weight:bold;';var sInput=document.createElement('input');sInput.type='number';sInput.value=activeIndex;sInput.min=1;sInput.max=totalCount;sInput.style.cssText='width:100%;padding:8px;border:1px solid #00A1D6;border-radius:4px;font-size:14px;box-sizing:border-box;';row1.appendChild(lab1);row1.appendChild(sInput);var row2=document.createElement('div');row2.style.cssText='margin-bottom:15px;';var lab2=document.createElement('label');lab2.textContent='结束集数';lab2.style.cssText='display:block;margin-bottom:5px;font-weight:bold;';var eInput=document.createElement('input');eInput.type='number';eInput.value=totalCount;eInput.min=1;eInput.max=totalCount;eInput.style.cssText='width:100%;padding:8px;border:1px solid #00A1D6;border-radius:4px;font-size:14px;box-sizing:border-box;';row2.appendChild(lab2);row2.appendChild(eInput);var rateRow=document.createElement('div');rateRow.style.cssText='margin-bottom:15px;';var rateLab=document.createElement('label');rateLab.textContent='播放倍速';rateLab.style.cssText='display:block;margin-bottom:5px;font-weight:bold;';var rateInput=document.createElement('input');rateInput.type='number';rateInput.value=1;rateInput.min=0.5;rateInput.max=2.0;rateInput.step=0.25;rateInput.style.cssText='width:100%;padding:8px;border:1px solid #00A1D6;border-radius:4px;font-size:14px;box-sizing:border-box;';rateRow.appendChild(rateLab);rateRow.appendChild(rateInput);var btn=document.createElement('button');btn.textContent='统计区间';btn.style.cssText='background-color:#00A1D6;color:white;border:none;padding:12px 20px;border-radius:4px;cursor:pointer;font-size:16px;font-weight:bold;width:100%;margin-bottom:20px;transition:background-color 0.3s;';var res=document.createElement('div');res.style.cssText='padding:15px;background-color:#e8f4fc;border-radius:5px;text-align:left;font-size:18px;color:#00A1D6;font-weight:bold;min-height:60px;display:flex;align-items:center;justify-content:flex-start;white-space:pre-line;line-height:1.6;';box.appendChild(closeBtn);box.appendChild(title);box.appendChild(row1);box.appendChild(row2);box.appendChild(rateRow);box.appendChild(btn);box.appendChild(res);body.appendChild(box);btn.onmouseover=function(){btn.style.backgroundColor='#0080A8'};btn.onmouseout=function(){btn.style.backgroundColor='#00A1D6'};btn.onclick=function(){try{var s=parseInt(sInput.value,10),e=parseInt(eInput.value,10),r=parseFloat(rateInput.value);if(!Number.isFinite(s)||!Number.isFinite(e)||s<1||e<1||s>totalCount||e>totalCount||s>e){res.textContent='请输入有效区间（1-'+totalCount+' 且 起始≤结束）';return}if(!Number.isFinite(r)||r<=0){res.textContent='请输入有效倍速（>0）';return}var total=0;for(var i=s-1;i<=e-1;i++){total+=secs[i]}var text='全 '+(e-s+1)+' 集\n原始：'+fmt(total);if(r!==1){var adj=Math.floor(total/r);text+='\n倍速'+r.toString()+'：'+fmt(adj)}res.textContent=text}catch(err){try{console.error(err)}catch(_){}res.textContent='统计失败：'+(err&&err.message?err.message:err)}}}catch(e){try{console.error(e)}catch(_){}alert('工具运行失败：'+(e&&e.message?e.message:e))}})();" class="drag-link">B站时间计算工具</a>
                </div>
            </div>
            
            <div class="step">
                <div class="step-number">2</div>
                <div>
                    <p><strong>使用工具</strong></p>
                    <p>访问B站视频列表页面，然后点击您刚刚创建的书签。</p>
                    <p>页面上会出现一个浮动面板，输入起始集数、结束集数和倍速，点击"计算"按钮即可。</p>
                </div>
            </div>
            
            <div class="step">
                <div class="step-number">3</div>
                <div>
                    <p><strong>替代方法</strong></p>
                    <p>如果您不想创建书签，也可以直接复制代码，在B站视频页面按F12打开开发者工具，在Console中粘贴代码并运行。</p>
                </div>
            </div>
        </div>
        
        <div class="main-content">
            <div class="video-list">
                <h2>示例视频列表</h2>
                <p>在实际B站页面中，这里会显示视频列表</p>
                <div class="video-items">
                    <!-- 示例视频列表将由JavaScript生成 -->
                </div>
            </div>
            
            <div class="calculator">
                <h2>时间计算器</h2>
                <div class="form-group">
                    <label for="start-episode">起始集数</label>
                    <input type="number" id="start-episode" min="1" value="1">
                </div>
                
                <div class="form-group">
                    <label for="end-episode">结束集数</label>
                    <input type="number" id="end-episode" min="1" value="12">
                </div>
                
                <div class="form-group">
                    <label for="playback-rate">播放倍速</label>
                    <input type="number" id="playback-rate" min="0.5" max="2.0" step="0.25" value="1.0">
                </div>
                
                <button id="calculate-btn">计算总时间</button>
                
                <div class="result" id="result">
                    计算结果将显示在这里
                </div>
            </div>
        </div>
        
        <footer>
            <p>© 2023 B站视频时间统计工具 | 本工具仅用于演示目的</p>
        </footer>
    </div>

    <script>
        // 生成示例视频列表
        document.addEventListener('DOMContentLoaded', function() {
            const videoItems = document.querySelector('.video-items');
            const totalEpisodes = 12;
            
            for (let i = 1; i <= totalEpisodes; i++) {
                const minutes = Math.floor(Math.random() * 10) + 20;
                const seconds = Math.floor(Math.random() * 60);
                const duration = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
                
                const videoItem = document.createElement('div');
                videoItem.className = 'video-item';
                videoItem.innerHTML = `
                    <span>第${i}集</span>
                    <span>${duration}</span>
                `;
                
                videoItems.appendChild(videoItem);
            }
            
            // 本地计算功能（仅用于演示）
            document.getElementById('calculate-btn').addEventListener('click', function() {
                const start = parseInt(document.getElementById('start-episode').value);
                const end = parseInt(document.getElementById('end-episode').value);
                const rate = parseFloat(document.getElementById('playback-rate').value);
                
                if (isNaN(start) || isNaN(end) || isNaN(rate) || start < 1 || end < start || rate <= 0) {
                    document.getElementById('result').textContent = '请输入有效的数值';
                    return;
                }
                
                // 模拟计算
                const totalMinutes = (end - start + 1) * 24;
                const adjustedMinutes = Math.floor(totalMinutes / rate);
                const hours = Math.floor(adjustedMinutes / 60);
                const minutes = adjustedMinutes % 60;
                
                document.getElementById('result').textContent = 
                    `全${end - start + 1}集: ${hours}时${minutes}分 (倍速${rate}倍)`;
            });
        });
    </script>
</body>
</html>